<template>
  <el-dialog
    title="修改学生信息"
    :visible.sync="dialogVisible"
    width="500px">
    <el-form label-width="120px" :model="formData" ref="form" :rules="rules">
      <el-form-item label="课程号" prop="courseId">
        <el-input v-model="formData.courseId" class="commonStyle" size="medium"></el-input>
      </el-form-item>
      <el-form-item label="学院" prop="department">
        <el-select v-model="formData.department" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.name"
            :label="item.name"
            :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="教师工号" prop="teacherId">
        <el-input v-model="formData.teacherId" class="commonStyle" size="medium"></el-input>
      </el-form-item>
      <el-form-item label="课程名称" prop="courseName">
        <el-input v-model="formData.courseName" class="commonStyle" size="medium"></el-input>
      </el-form-item>
      <el-form-item label="学分" prop="credit">
        <el-input v-model="formData.credit" class="commonStyle" size="medium"></el-input>
      </el-form-item>
      <el-form-item label="课程属性" prop="courseAttribute">
        <el-input v-model="formData.courseAttribute" class="commonStyle" size="medium"></el-input>
      </el-form-item>
      <el-form-item label="上课时间" prop="courseTime">
        <el-input v-model="formData.courseTime" class="commonStyle" size="medium"></el-input>
      </el-form-item>
      <el-form-item label="上课地点" prop="courseLocation">
        <el-input v-model="formData.courseLocation" class="commonStyle" size="medium"></el-input>
      </el-form-item>
      <el-form-item label="课程容量" prop="capacity">
        <el-input v-model="formData.capacity" class="commonStyle" size="medium"></el-input>
      </el-form-item>
      <el-form-item label="选课开始时间" prop="selectionStartTime">
        <el-date-picker
          v-model="formData.selectionStartTime"
          value-format="yyyy-MM-dd"
          type="date"
          size="medium"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="选课结束时间" prop="selectionEndTime">
        <el-date-picker
          v-model="formData.selectionEndTime"
          value-format="yyyy-MM-dd"
          type="date"
          size="medium"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="danger" size="medium" @click="cancel">取消</el-button>
      <el-button type="primary" size="medium" @click="update">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { updatePublicCou } from '@/api/courseManage'
import { options } from '@/constants/publicCourseTable'

export default {
  name: "index",
  data() {
    return {
      // 控制弹窗
      dialogVisible: false,
      // 表单中的信息
      formData: {

      },
      options,
      rules: {
        courseId: [
          { required: true, message: '请输入课程号', trigger: 'blur' }
        ],
        department: [
          { required: true, message: '请输入学院', trigger: 'blur' }
        ],
        teacherId: [
          { required: true, message: '请输入教师工号', trigger: 'blur' }
        ],
        courseName: [
          { required: true, message: '请输入课程名称', trigger: 'blur' }
        ],
        credit: [
          { required: true, message: '请输入学分', trigger: 'blur' }
        ],
        courseAttribute: [
          { required: true, message: '请输入课程属性', trigger: 'blur' }
        ],
        courseTime: [
          { required: true, message: '请输入上课时间', trigger: 'blur' }
        ],
        courseLocation: [
          { required: true, message: '请输入上课地点', trigger: 'blur' }
        ],
        capacity: [
          { required: true, message: '请输入课程容量', trigger: 'blur' }
        ],
        selectionStartTime: [
          { required: true, message: '请选择选课开始时间', trigger: 'blur' }
        ],
        selectionEndTime: [
          { required: true, message: '请选择选课结束时间', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 打开弹框
    openDialog(val) {
      this.formData = {...val}
      this.dialogVisible = true
    },
    // 取消
    cancel() {
      this.initData()
      this.dialogVisible = false
    },
    // 初始化数据
    initData() {
      this.formData = {

      }
    },
    // 更新或新增
    async update() {
      this.$refs.form.validate(async (valid) => {
        if(!valid) {
          return false
        } else {
          const res = await updatePublicCou(this.formData)
          if (res.success == true) {
            this.$message.success(res.data)
            this.$emit('reloadData')
            this.dialogVisible = false
          } else {
            this.$message.error(res.errorMsg)
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="sass">
.commonStyle
  width: 200px
</style>
